<template>

  <div>

    <el-container>
      <el-header>

        <el-row justify="start">
          <el-col :span="4">
            <div>
              <el-input
                  placeholder="请输入内容"
                  v-model="search"
                  clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-button @click="refresh">刷新</el-button>
              <el-button @click="add">新增组件</el-button>
              <el-button @click="downloadDemo">下载demo包</el-button>

              <!--          <el-button @click="clearFilter">清除所有过滤器</el-button>-->
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>

        <el-row justify="start">
          <el-col :span="24">
            <div class="">
              <el-table
                  :data="this.tableData"
                  style="width: 100%">
                <el-table-column
                    fixed
                    prop="compName"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="compCode"
                    label="编码">
                </el-table-column>
                <el-table-column
                    prop="groupName"
                    label="分组名称">
                </el-table-column>
                <el-table-column
                    prop="groupCode"
                    label="分组编码">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                  <template #default="scope">
                    <el-tag v-if="scope.row.systemFlag" type="default" size="small">system</el-tag>
                    &nbsp;
                    <el-button @click="handleClick(scope.row)" type="default" size="small">查看</el-button>
                    <el-button v-if="!scope.row.systemFlag" @click="edit(scope.row)" type="default" size="small">编辑
                    </el-button>

                    <el-button type="default" size="small" @click="this.handleConfig(scope.row)">配置</el-button>
                    <el-button v-if="!scope.row.systemFlag"  type="default" size="small" @click="this.removeCompConfig(scope.row)">删除</el-button>

                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-col>
        </el-row>

      </el-main>

      <el-dialog v-model="compDiag.visible" width="300px">
        <el-form :model="compDiag">
          <el-form-item label="组件名称">
            <el-input v-model="compDiag.compName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组件编码">
            <el-input v-model="compDiag.compCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分组编码">
            <el-input v-model="compDiag.groupCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分组名称">
            <el-input v-model="compDiag.groupName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-upload
                ref="upload"
                class="upload-demo"
                :limit="1"
                :auto-upload="false"
                :on-change="progress"
            >
              <template #trigger>
                <el-button type="primary">select file</el-button>
                &nbsp; &nbsp; &nbsp;<el-image style="width: 50px; height: 50px" :src="compDiag.url"/>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="compDiag.visible = false">取 消</el-button>
          <el-button type="primary" @click="this.saveComp">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog v-model="this.compVersionDiag"
                 width="100%">
        <ProcessCompVersionManager ref="versionManager"/>
      </el-dialog>

    </el-container>

  </div>

</template>

<script>
import {getStream, post} from '../../config/Request.js'
import ProcessCompVersionManager from './ProcessCompVersionManager.vue'
import apis from "@/request/apis.js";

export default {
  name: "ProcessCompManager",
  components: {
    ProcessCompVersionManager
  },
  watch: {},
  data() {
    return {
      tableData: [],
      compVersionDiag: false,
      currentCompCode: null,
      compDiag: {
        visible: false,
        viewFlag: false,
        compName: "",
        id: null,
        url: "",
        groupCode: "",
        groupName: "",
        icon: "",
        compCode: ""
      }
    }
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.queryCompList();
    },
    async queryCompList() {
      const data = await apis.post("/square-lake/process/comp/list", {})
      // console.log(data);
      // this.$set(this, "tableData", data);
      this.tableData = data;
    },
    handleConfig(row) {
      //现在需要弹出 版本列表，并可以编辑
      this.compVersionDiag = true;
      this.currentCompCode = row.compCode;
      setTimeout(function () {
        this.$refs.versionManager.refresh(row.compCode,row.systemFlag);
      }.bind(this), 0)
    },
    progress(a) {
      //this.uploadFile = a;
      let file = a
      let reader = new FileReader()
      // abort none 中断读取
      // readAsBinaryString file 将文件读取为二进制码，通常我们将它传送到后端，后端可以通过这段字符串存储文件
      // readAsDataURL file 将文件读取为 DataURL，一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
      // readAsText file, [encoding] 将文件读取为文本，读取的结果即是这个文本文件中的内容
      reader.readAsText(file.raw)
      // onabort 中断时触发
      // onerror 出错时触发
      // onload 文件读取成功完成时触发
      // onloadend 读取完成触发，无论成功或失败
      // onloadstart 读取开始时触发
      // onprogress 读取中
      const s = this;
      reader.onload = (e) => {
        // 读取文件内容
        s.compDiag.icon = e.target.result;
        s.svgToBase64();
        // 接下来可对文件内容进行处理
      }
    },
   async removeCompConfig(row){
      const data = await apis.post("/square-lake/process/comp/remove_by_id", {
        id:row.id
      })
      // console.log(data);
      // this.$set(this, "tableData", data);
      this.refresh();
    },
    async downloadDemo() {
      var blob = await getStream("/square-lake/process/comp/object/download_demo");
      var downloadElement = document.createElement('a');
      var href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = "demo.zip"; //定义文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
    },
    add() {
      this.compDiag.visible = true;
    },
    async handleClick(row) {
      await this.edit(row);
      this.compDiag.viewFlag = true;

    },
    async edit(row) {
      const data = await apis.post("/square-lake/process/comp/get_by_id", {
        id: row.id,
        systemFlag:row.systemFlag,
        version: row.version});

      this.compDiag.compName = data.compName;
      this.compDiag.id = data.id;
      this.compDiag.compCode = data.compCode;
      this.compDiag.groupCode = data.groupCode;
      this.compDiag.groupName = data.groupName;
      this.compDiag.icon = data.icon;
      this.svgToBase64();
      this.compDiag.visible = true;
    },
    svgToBase64() {
      const base64 = "data:image/svg+xml;base64," + btoa(this.compDiag.icon);
      this.compDiag.url = base64;
    },
    async saveComp() {
      if (this.compDiag.viewFlag) {
        this.compDiag.viewFlag = false;
        this.compDiag.visible = false;
        return
      }
      if (!this.compDiag.compName) {
        this.$message.error('请输入名称');
        return;
      }
      if (!this.compDiag.compCode) {
        this.$message.error('请输入组件编码');
        return;
      }
      if (!this.compDiag.groupCode) {
        this.$message.error('请输入分组编码');
        return;
      }
      if (!this.compDiag.groupName) {
        this.$message.error('请输入分组名称');
        return;
      }
      await apis.post("/square-lake/process/comp/save", {
        compName: this.compDiag.compName, compCode: this.compDiag.compCode,
        groupCode: this.compDiag.groupCode,
        groupName: this.compDiag.groupName,
        icon: this.compDiag.icon,
        id: this.compDiag.id
      });

      this.compDiag.compName = '';
      this.compDiag.compCode = '';
      this.compDiag.groupCode = '';
      this.compDiag.groupName = '';
      this.compDiag.icon = '';
      this.compDiag.visible = false;
      this.compDiag.id = null;
      this.refresh();
    }

  }
}
</script>

<style scoped>

</style>